<template>
  <el-form ref="formRef" :model="formData" size="default" :rules="rules" label-width="">
    <label>人员月度工资限额设置</label>
    <el-row style="margin-bottom: 30px" justify="start">
      <el-col :span="itemSpan">
        <el-form-item label="" prop="maxAmount">
          <el-input v-model="formData.maxAmount" type="number" placeholder="请输入人员月度工资限额设置">
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row justify="end" style="margin-top: 10px">
      <el-col :span="mobile === 'mobile' ? 24 : 12" style="display: flex; justify-content: end">
        <el-button type="primary" :loading="loading" @click="handleSubmit">提交</el-button>
      </el-col>
      <el-col :span="mobile === 'mobile' ? 24 : 12">
        <el-form-item></el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import { getWageMonthAmountSettings, setWageMonthAmountSettings } from "@/api/system/configuration/index";
import { WageMonthAmountSettingsEditForm } from "@/api/system/configuration/types";

import { useScreen } from "@/store/modules/screen";

const screenStore = useScreen();
const mobile = computed(() => screenStore.device);
const itemSpan = ref(6);

function initScreen() {
  if (mobile.value === "mobile") {
    itemSpan.value = 12;
  } else {
    itemSpan.value = 6;
  }
}

const formRef = ref();
const loading = ref(false);

const formData = reactive<WageMonthAmountSettingsEditForm>({
    maxAmount:0
});

const rules = reactive({
  maxAmount: [
    { required: true, message: "人员月度工资限额不能为空", trigger: "blur" }
  ]
});

onMounted(() => {
  initScreen();

  handleQuery();
});

function handleQuery() {
  formRef.value.clearValidate();
  getWageMonthAmountSettings().then((res) => {
    if (res.success) {
      
      Object.assign(formData, res.data);
    }
  });
}

/**
 * 重置表单
 */
function resetForm() {
  formRef.value.resetFields();
  formRef.value.clearValidate();
}

function handleSubmit() {
  formRef.value.validate((valid: any) => {
    if (valid) {
      loading.value = true;
      let temp = Object.assign({}, formData);
      setWageMonthAmountSettings(temp)
        .then((data) => {
          if (data.success) {
            ElMessage({
              type: "success",
              message: data.msg,
            });
          } else {
            ElMessage({
              type: "error",
              message: data.msg,
            });
          }
          loading.value = false;
        })
        .catch((e) => {
          ElMessage({
            type: "error",
            message: "修改失败！",
          });
          loading.value = false;
        })
        .finally(() => {
          loading.value = false;
          handleQuery();
        });
    }
  });
}
</script>

<style lang="less" scoped></style>
